<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">
      <p class="caption">If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.</p>
      <div id="linear" class="section scrollspy">
        <h2 class="header">Linear</h2>
        <p>There are a couple different types of linear progress bars.</p>
        <h4>Determinate</h4>
        <div class="row">
          <div class="div col s8 offset-s2">
            <div class="progress">
                <div class="determinate" style="width: 70%"></div>
            </div>
          </div>
        </div>
        <pre><code class="language-markup">
  &lt;div class="progress">
      &lt;div class="determinate" style="width: 70%">&lt;/div>
  &lt;/div>
        </code></pre>

        <h4>Indeterminate</h4>
        <div class="row">
          <div class="div col s8 offset-s2">
            <div class="progress">
                <div class="indeterminate"></div>
            </div>
          </div>
        </div>
        <pre><code class="language-markup">
  &lt;div class="progress">
      &lt;div class="indeterminate">&lt;/div>
  &lt;/div>
        </code></pre>

      </div>

      <!-- Preloader Section-->
      <div id="circular" class="section scrollspy">
        <h2 class="header">Circular</h2>
        <p>There are 4 colors and 3 sizes of circular spinners. The spinner should be nested in a <code class="language-markup">preloader-wrapper</code> div. The default size is medium, but you can add the classes <code class="language-markup">big</code> or <code class="language-markup">small</code> to adjust the size accordingly. You can add the classes <code class="language-markup">spinner-red-only</code>, <code class="language-markup">spinner-blue-only</code>, <code class="language-markup">spinner-yellow-only</code> and <code class="language-markup">spinner-green-only</code>. You can also leave this class as just <code class="language-markup">spinner-layer</code> and it will be set to the <code class="language-css">$spinner-default-color</code> variable in our variables.scss file.</p>
        <h4>Colors</h4>
        <div class="row">
          <div class="col s12 m4 center">
            <div class="preloader-wrapper big active">
              <div class="spinner-layer spinner-blue-only">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="col s12 m4 center">

            <div class="preloader-wrapper active">
              <div class="spinner-layer spinner-red-only">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>
            </div>

          </div>
          <div class="col s12 m4 center">

            <div class="preloader-wrapper small active">
              <div class="spinner-layer spinner-green-only">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <pre><code class="language-markup">
  &lt;div class="preloader-wrapper big active">
    &lt;div class="spinner-layer spinner-blue-only">
      &lt;div class="circle-clipper left">
        &lt;div class="circle">&lt;/div>
      &lt;/div>&lt;div class="gap-patch">
        &lt;div class="circle">&lt;/div>
      &lt;/div>&lt;div class="circle-clipper right">
        &lt;div class="circle">&lt;/div>
      &lt;/div>
    &lt;/div>
  &lt;/div>

  &lt;div class=&quot;preloader-wrapper active&quot;&gt;
    &lt;div class=&quot;spinner-layer spinner-red-only&quot;&gt;
      &lt;div class=&quot;circle-clipper left&quot;&gt;
        &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;div class=&quot;gap-patch&quot;&gt;
        &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;div class=&quot;circle-clipper right&quot;&gt;
        &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;preloader-wrapper small active&quot;&gt;
    &lt;div class=&quot;spinner-layer spinner-green-only&quot;&gt;
      &lt;div class=&quot;circle-clipper left&quot;&gt;
        &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;div class=&quot;gap-patch&quot;&gt;
        &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;div class=&quot;circle-clipper right&quot;&gt;
        &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
        </code></pre>
      </div>

      <div id="circular-color" class="section scrollspy">
        <h2 class="header">Circular Flashing Colors</h2>
        <div class="row">
          <div class="col s12 m4 center">
            <div class="preloader-wrapper big active">
              <div class="spinner-layer spinner-blue">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>

              <div class="spinner-layer spinner-red">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>

              <div class="spinner-layer spinner-yellow">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>

              <div class="spinner-layer spinner-green">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col s12 m4 center">

            <div class="preloader-wrapper active">
              <div class="spinner-layer spinner-blue">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>

              <div class="spinner-layer spinner-red">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>

              <div class="spinner-layer spinner-yellow">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>

              <div class="spinner-layer spinner-green">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>
            </div>

          </div>
          <div class="col s12 m4 center">

            <div class="preloader-wrapper small active">
              <div class="spinner-layer spinner-blue">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>

              <div class="spinner-layer spinner-red">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>

              <div class="spinner-layer spinner-yellow">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>

              <div class="spinner-layer spinner-green">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div><div class="gap-patch">
                  <div class="circle"></div>
                </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <pre><code class="language-markup">
    &lt;div class="preloader-wrapper big active">
      &lt;div class="spinner-layer spinner-blue">
        &lt;div class="circle-clipper left">
          &lt;div class="circle">&lt;/div>
        &lt;/div>&lt;div class="gap-patch">
          &lt;div class="circle">&lt;/div>
        &lt;/div>&lt;div class="circle-clipper right">
          &lt;div class="circle">&lt;/div>
        &lt;/div>
      &lt;/div>

      &lt;div class="spinner-layer spinner-red">
        &lt;div class="circle-clipper left">
          &lt;div class="circle">&lt;/div>
        &lt;/div>&lt;div class="gap-patch">
          &lt;div class="circle">&lt;/div>
        &lt;/div>&lt;div class="circle-clipper right">
          &lt;div class="circle">&lt;/div>
        &lt;/div>
      &lt;/div>

      &lt;div class="spinner-layer spinner-yellow">
        &lt;div class="circle-clipper left">
          &lt;div class="circle">&lt;/div>
        &lt;/div>&lt;div class="gap-patch">
          &lt;div class="circle">&lt;/div>
        &lt;/div>&lt;div class="circle-clipper right">
          &lt;div class="circle">&lt;/div>
        &lt;/div>
      &lt;/div>

      &lt;div class="spinner-layer spinner-green">
        &lt;div class="circle-clipper left">
          &lt;div class="circle">&lt;/div>
        &lt;/div>&lt;div class="gap-patch">
          &lt;div class="circle">&lt;/div>
        &lt;/div>&lt;div class="circle-clipper right">
          &lt;div class="circle">&lt;/div>
        &lt;/div>
      &lt;/div>
    &lt;/div>
        </code></pre>
      </div>


    </div>


    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#linear">Linear</a></li>
            <li><a href="#circular">Circular</a></li>
            <li><a href="#circular-color">Circular Flashing Colors</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

